<template>
  <view class="good_del">
    <swiper class="pop_img" indicator-dots indicator-color="#fff">
      <swiper-item v-for="(items, index) in item.coverUrl" :key="index">
        <image :src="items" mode="aspectFit" />
      </swiper-item>
    </swiper>
    <view class="pop_name">{{ item.title }}</view>
    <view class="pop_info">
      <view class="pop_price">
        ￥
        <text>{{ item.price }}</text>
        /份
      </view>
      <view class="pop_coust">
        <wd-input-number v-model="data.goodsCount" @change="change" :min="0" />
      </view>
    </view>
    <view class="pop_kou" v-if="data.mchId != 9">
      <view v-for="(item, index) in data.kou" :class="item.sel ? 'sel_kou' : 'pop_kou_item'" @click="selkou(index)" :key="index">{{ item.name }}</view>
    </view>
    <view class="pop_remark">
      <input type="text" v-model="data.remark" placeholder="更多备注" />
    </view>
    <view class="pop_btn" @click="care">添加至购物车</view>
  </view>
</template>

<script lang="ts" setup>
import { get, err, toast } from '@/utils/uniapi';
import { reactive } from 'vue';
import { api } from '@/api/store_api';
interface Item {
  coverUrl: any;
  title: string;
  price: string;
  id: string;
  goodsSkuBOList: any;
}
const data = reactive({
  goodsCount: 1,
  kou: [
    {
      name: '微辣',
      sel: false
    },
    {
      name: '中辣',
      sel: false
    },
    {
      name: '特辣',
      sel: false
    }
  ],
  remark: '',
  mchId: get('mchId')
});
const props = defineProps<{
  item: Item;
}>();
const emit = defineEmits(['selitem']);
function change(e: any) {
  data.goodsCount = e.value;
}
function selkou(i: any) {
  try {
    const updateKou = data.kou.map((item, index) => {
      return {
        ...item,
        sel: index === i ? !item.sel : false
      };
    });
    data.kou = updateKou;
  } catch (error) {
    err(error);
  }
}
async function care() {
  try {
    const { goodsCount, remark } = data;
    const item = props.item;
    if (!item?.id || !item?.goodsSkuBOList || !goodsCount) {
      throw new Error('添加商品参数不完整，请稍后重试！');
    }
    const skuId = item.goodsSkuBOList[0].id;
    const deskId = get('deskId');
    const selectedKous = data.kou
      .filter((e: any) => e.sel)
      .map((e: any) => e.name)
      .join('');
    const cartRemark = `${selectedKous}${remark}`;
    const datas = {
      goodsId: item.id,
      goodsCount,
      skuId,
      deskId,
      remark: cartRemark
    };
    const { respCode, msg } = await api.addcaicrt(datas);
    if (respCode === 200) {
      data.goodsCount = 1;
      toast('添加成功');
    } else {
      toast(msg || '添加失败');
    }
    emit('selitem');
  } catch (error) {
    err(error);
    toast('添加商品到购物车失败，请稍后再试！');
  }
}
</script>

<style lang="scss" scoped>
.good_del {
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #fff;
  .pop_img {
    width: 710rpx;
    margin: 0 auto;
    display: block;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .pop_name {
    font-size: 40rpx;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #3d3d3d;
    margin-left: 40rpx;
  }
  .pop_info {
    overflow: hidden;
    padding: 0 40rpx;
    margin-top: 50rpx;
    .pop_price {
      font-size: 32rpx;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #3d3d3d;
      float: left;
      text {
        font-size: 56rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #3d3d3d;
      }
    }
    .pop_coust {
      width: 200rpx;
      float: right;
      margin-top: 14rpx;
    }
  }
  .pop_kou {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10rpx;
    .pop_kou_item {
      width: 100rpx;
      height: 60rpx;
      border: 1rpx solid #ccc;
      text-align: center;
      line-height: 60rpx;
      border-radius: 20rpx;
    }
    .sel_kou {
      width: 100rpx;
      height: 60rpx;
      border: 1rpx solid #ccc;
      text-align: center;
      line-height: 60rpx;
      border-radius: 20rpx;
      background-color: red;
      color: #fff;
    }
  }
  .pop_remark {
    margin: 0 40rpx;
    height: 60rpx;
    line-height: 60rpx;
    border: 1rpx solid #ccc;
    border-radius: 20rpx;
    input {
      height: 60rpx;
      padding-left: 20rpx;
    }
  }
  .pop_btn {
    width: 652rpx;
    height: 80rpx;
    background: #e30514;
    border-radius: 56rpx 56rpx 56rpx 56rpx;
    font-size: 32rpx;
    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
    margin: 0 auto;
    margin-top: 12rpx;
  }
}
</style>
